postcss-reduce-initial

What is postcss-reduce-initial?

The postcss-reduce-initial npm package is a PostCSS plugin that optimizes CSS by replacing properties set to their initial values with the 'initial' keyword, thus reducing the size of the CSS file. It can be particularly useful for minimizing the output of CSS preprocessors that tend to output properties with their initial values.

What are postcss-reduce-initial's main functionalities?

Replace properties with 'initial'

This feature takes CSS properties that are set to their initial values and replaces them with the 'initial' keyword. For example, 'min-width: auto;' would be replaced with 'min-width: initial;', and 'transition-duration: 0s;' would be replaced with 'transition-duration: initial;'.

".element {\n  min-width: auto;\n  transition-duration: 0s;\n}"

Other packages similar to postcss-reduce-initial

cssnano

cssnano is a modular minifier for CSS that includes various optimizations, including reducing initial values to the 'initial' keyword, similar to postcss-reduce-initial. However, cssnano offers a broader range of optimizations such as merging rules, minifying font values, discarding comments, and more.

postcss-normalize-whitespace

postcss-normalize-whitespace is a PostCSS plugin that normalizes whitespace by removing it where possible in CSS files. While it doesn't specifically target initial values, it contributes to the overall reduction of CSS file size, which is a similar goal to postcss-reduce-initial.

postcss-merge-longhand

postcss-merge-longhand is a plugin that merges multiple CSS properties into shorthand properties, which can reduce the size of CSS files. This is different from postcss-reduce-initial's approach of replacing properties with the 'initial' keyword but achieves a similar end of optimizing CSS output.

README

postcss-reduce-initial

Reduce initial definitions to the actual initial value, where possible.

Install

With npm do:

npm install postcss-reduce-initial --save

Example

This module will replace the initial CSS keyword with the actual value, when this value is smaller than the initial definition itself. For example, the initial value for the min-width property is 0; therefore, these two definitions are equivalent;

Input

h1 {
    min-width: initial;
}

Output

h1 {
    min-width: 0;
}

See the data for more conversions. This data is courtesy of Mozilla.

Usage

See the PostCSS documentation for examples for your environment.

Contributors

Thanks goes to these wonderful people (emoji key):

Ben Briggs 💻 📖 👀 ⚠️	Chris Walker 🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

Template:CSSData by Mozilla Contributors is licensed under CC-BY-SA 2.5.

MIT © Ben Briggs